<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row>
      <el-table-column label="钥匙编号">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
          {{ scope.row.model }}
        </template>
      </el-table-column>
      <el-table-column label="软件版本">
        <template slot-scope="scope">
          {{ scope.row.softwareVersion }}
        </template>
      </el-table-column>
      <el-table-column label="硬件版本">
        <template slot-scope="scope">
          {{ scope.row.hardwareVersion }}
        </template>
      </el-table-column>
      <el-table-column label="协议版本版本">
        <template slot-scope="scope">
          {{ scope.row.protocolVersion }}
        </template>
      </el-table-column>
      <el-table-column label="最后使用时间">
        <template slot-scope="scope">
          {{ scope.row.lastActiveTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>
      <el-table-column v-if="isSuperAdmin" label="领用人">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
    </el-table>
    <div v-if="list.length > 0" class="pagination-container">
      <el-pagination :current-page="listQuery.currentPage" :page-sizes="[10,25,50,100]" :page-size="listQuery.pageSize" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <back-to-top :custom-style="myBackToTopStyle" :visibility-height="10" :back-position="0" transition-name="fade"/>
  </div>
</template>
<script>
import BackToTop from '@/components/BackToTop'
import { mapGetters } from 'vuex'
export default {
  name: 'Key',
  components: { BackToTop },
  data() {
    return {
      list: [{
        name: 'HNTT0359KC38BB4BA5',
        model: 'M3',
        softwareVersion: 'V3.8',
        hardwareVersion: 'V3.8',
        protocolVersion: 'V3.8',
        lastActiveTime: 1543824745000,
        username: 'admin'
      }, {
        name: 'HNTT0359KCE93KE990',
        model: 'M3',
        softwareVersion: 'V3.8',
        hardwareVersion: 'V3.8',
        protocolVersion: 'V3.8',
        lastActiveTime: 1543996368000,
        username: 'admin'
      }],
      total: 2,
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 25
      },
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px',
        background: '#e7eaf1'
      }
    }
  },
  computed: {
    ...mapGetters([
      'isSuperAdmin'
    ])
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.fetchData()
    }
  }
}
</script>
